<template>
  <div class="content">
    <el-form @submit.native.prevent="save" label-width="180px">
      <el-form-item v-for="(e, i) in form" :key="'item_' + i" :label="e.label">
        <!-- 正常输入框 -->
        <el-input v-if="e.type == 'text'" v-model="model[e.val]"></el-input>
        <!-- 是否为上传单张图片 -->
        <el-upload
          v-if="e.type == 'img'"
          class="avatar-uploader"
          :action="url + '/upload'"
          :show-file-list="false"
          :on-success="res => $set(model, e.val, res.data.path)"
        >
          <img v-if="model[e.val]" :src="model[e.val]" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!-- 判断是否需要富文本 -->
        <editor
          v-if="e.type == 'editor'"
          ref="editor"
          v-model="model[e.val]"
        ></editor>
        <!-- 下拉选择框 -->
        <el-select v-if="e.type == 'select'" v-model="model[e.val]">
          <el-option
            v-for="(item, i) in e.select"
            :key="'item_' + i"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- 判断类型是否为单选框 -->
        <div v-if="e.type == 'radio'">
          <el-radio
            v-for="(item, i) in e.radio"
            :key="'item_1' + i"
            v-model="model[e.val]"
            :label="item.label"
            >{{ item.value }}</el-radio
          >
        </div>
        <!-- 判断选择类型是否为时间类型 -->
        <div v-if="e.type == 'time'">
          <el-col :span="6">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="model[e.val]"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </div>
        <!-- 是否上传多张图片 -->
        <div v-if="e.type == 'imglist'">
          <el-upload
            :file-list="model[e.val]"
            :action="url + '/upload'"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handle"
            :limit="3"
            :objectline="e.val"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </div>
      </el-form-item>
      <el-form-item>
        <slot name="btns" :data="model"></slot>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import editor from "@/components/editor/index.vue";
import { Component, Prop } from "vue-property-decorator";
import { mixins } from "vue-class-component";
import upload from "../../utils/upload";
@Component({
  components: {
    editor
  }
})
export default class extends mixins(upload) {
  @Prop({ default: {} }) form!: {}[];
  @Prop({ default: {} }) model!: any;
  public imgs = "";

  public filelist: any = [];

  public dialogImageUrl = "";
  public dialogVisible = false;
  // public fileList = [];

  private watchs: any = [];

  private handle(a: any, b: any, c: any, d: any) {
    // 图片上传成功的回调，其中d代表你设置的元素，c代表照片墙中的照片
    this.model[d] = c;
  }

  private handleRemove(file: any, fileList: any, c: any) {
    this.model[c] = fileList;
  }
  private handlePictureCardPreview(file: any) {
    this.dialogImageUrl = file.url;
    this.dialogVisible = true;
  }
  created() {
    // 添加监听
    this.watchs.push(
      this.$watch("model", (n, o): any => {
        this.$emit("update:model", n);
      })
    );
  }

  destoryed() {
    // 页面销毁清除监听
    this.watchs.forEach((e: Function) => {
      e();
    });
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed #ccc;
  border-radius: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
